<template>
  <div class="test">
    <div class="container">
      <h1>音乐播放器</h1>
      <el-button type="primary" class="container_btn" @click="addMusic"
        >添加音乐</el-button
      >
    </div>
    <div class="main">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>你的歌单</span>
        </div>
        <div v-for="item in musicList" :key="item.id" class="text item" @click="changeSong(item.path)">
          {{ item.fileName }}
        </div>
      </el-card>
    </div>
    <div class="footer" >
      <h4>正在播放</h4>
         <audio ref="audio"  controls/>
    </div>
  </div>
</template>

<script>
const { ipcRenderer } = require("electron");
const { Menu } = require('electron')
export default {
  name: "index",
  data() {
    return {
      musicList: [],
      audioSrc:"D:\Users\Administrator\Desktop\kpasian柯普森 situasian张太郎 - Crush Punch-爱如潮水remix（kpasian situasian张太郎 Remix）.mp3"
    };
  },
  mounted(){
    
  },
  methods: {
    
    changeSong(path) {
    console.log('path',path);
    this.$refs.audio.src = path
    console.log(' this.$refs.audio.src', this.$refs.audio.src);
    this.$refs.audio.play()
},
    //添加音乐 打开弹窗
    addMusic() {
      ipcRenderer.send("addMusic");
      ipcRenderer.on("getTracks", (event, arg) => {
        console.log('getTracks歌单',arg);
        this.musicList = arg;
      });
    },
  },
};
</script>

<style scoped lang="scss">
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.test {
  height: 100%;
  width: 100%;
  background: radial-gradient(
    ellipse at top left,
    rgb(247, 209, 245) 40%,
    rgba(134, 208, 226, 0.9) 100%
  );
}
.container {
  padding-top: 50px;
  text-align: center;
  &_btn {
    margin-top: 50px;
    width: 80%;
  }
}
.main {
  margin: 50px auto;
  width: 80%;
  background-color: white;
}
.footer {
  margin: 50px auto;
  width: 80%;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style>
